<template>
    <el-row class="main-cont padd20 box box-tb">
        <el-row class="box mb20 box-align-center">
            <span class="xqjhtext mr10">学期</span>
            <el-select v-model="xnxq" placeholder="选择学期" @change="trClasslist" class="text">
                <el-option v-for="(item,index) in xnxqList" :key="index" :label="`${item.xn}${item.xq}`"
                    :value="`${item.xn}${item.xq}`"></el-option>
            </el-select>
        </el-row>
        <el-row class="height100">
            <el-row class="mt20 maxwidth box box-tb boxpack-align" :gutter="20" v-if="classList.length !=0">
                <el-col class="list" v-for="(item,i) in classList" :key="i">
                    <div class="grid-content bg-white box box-tb box-align-center box-pack-between padd10">
                        <div class="box box-align-center box-pack-start top padd10">
                            <div class="class-logo box box-align-center box-pack-center oh">{{item.className}}</div>
                            <div class="box box-tb box-align-start box-pack-around class-info ml20">
                                <h3>{{item.className}}</h3>
                                <div>
                                    <i class="el-icon-user"></i>
                                    <span>共 {{item.stuNum}}人</span>
                                </div>
                            </div>
                        </div>
                        <el-col class="box box-tb box-pack-start box-align-start">
                            <span class="mb20 mt10">评分小组 （{{item.pfxzNum}}人）</span>
                            <div class="box box-align-center box-pack-between bottom cp" @click="goDetail(item)">
                                <div class="box box-align-center">
                                    <span class="mr10">组长</span>
                                    <div class="box box-align-center mr20" v-if="item.zzIcon != null">
                                        <el-avatar v-if="item.zzIcon != null" :size="number" :src="item.zzIcon"></el-avatar>
                                        <span class="ml10 user-name">{{item.zzName}}</span>
                                    </div>
                                    <div class="mr20" v-else>暂无组长</div>
                                    <span class="mr10">组员</span>
                                    <div class="box box-align-center" style="min-width: 250px;overflow: hidden;">
                                        <el-avatar v-if="item.zyIconList.length != 0" :size="number" :src="cy" class="avatar" v-for="(cy,ix) in item.zyIconList" :key="ix"></el-avatar>
                                    </div>
                                </div>
                                <i class="el-icon-arrow-right"></i>
                            </div>
                        </el-col>
                    </div>
                </el-col>
            </el-row>
            <el-row class="height100 box box-pack-center box-align-center" v-else>
                <el-empty description="本学期暂无带班信息" image="../../../static/image/nodata/nodata.png"></el-empty>
            </el-row>
        </el-row>
    </el-row>
</template>

<script>
    export default {
        data() {
            return {
                xnxqList: [],
                loginInfo:this.$store.state.loginInfo,
                schoolid:this.$store.state.user.schoolId,
                curSchoolid:this.$store.state.schoolId,
                selectedRole:this.$store.state.selectedRole,
                classList:[],
                page: {
                    total: 0,
                    pageSize: 10,
                    pageNum: 1,
                    list: []
                },
                tkzt: false,
                selectVal: '',
                searchText: '',
                title: '添加',
                number: 34,
                current: 0,
                num: 1,
                courseList: [],
                kcShow: false,
                sjShow: false,
                xnxq:''

            };
        },
        mounted() {
            if(this.selectedRole.roleCode=='team_tr'){
                this.schoolid=this.curSchoolid
            }
            this.xnxqs();
        },
        methods: {
            xnxqs() {
                this.$ajax.post('/comm/getXnxqList').then(res => {
                    if (res.code == '0') {
                        console.log(res);
                        this.xnxqList = res.xnxqList;
                        let _this = this;
                        res.xnxqList.forEach(function(item, index) {
                            if (item.isCur == 1) {
                                _this.xnxq = item.xn + item.xq;
                            }
                        })
                        this.trClasslist();
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            trClasslist() {
                let params = {
                    trid:this.loginInfo.user.id,
                    schoolid:this.schoolid,
                    xn:this.xnxq.substring(0,9),
                    xq:this.xnxq.substring(9,12)
                };
                console.log(params)
                this.$ajax.post('/dclass/trclasslist',params).then(res => {
                    if (res.code == '0') {
                        console.log(res);
                        this.classList = res.list;
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            goDetail(item) {
                this.$router.push({
                    path: "/bjxx_tr/bjxq_tr"
                })
                let clas = {
                    classid:item.id,
                    className:item.className
                }
                localStorage.setItem('classInfo',JSON.stringify(clas))
            },
        }
    }
</script>

<style scoped lang="scss">
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .maxwidth {
        max-width: 1400px;
        // margin: 20px auto !important;
    }

    .list {
        width: 700px;
        .top {
            box-sizing: border-box;
            width: 100%;
            border-bottom: 1px solid #ccc;

            .class-logo {
                width: 72px;
                height: 72px;
                background: #E2E6FE;
                border-radius: 5px;
                color: #626BF1;
            }

            .class-info {
                height: 100%;
            }
        }

        .bottom {
            width: 100%;

            .avatar {
                margin-left: -17px;

                &:first-child {
                    margin-left: 0;
                }
            }
        }
    }

    .tab {
        width: 158px;
        height: 42px;
        line-height: 42px;
        border-radius: 14px;
        border: 1px solid #E5E6F1;
        background-color: #fff;
        font-size: 18px;

        &:first-child {
            border-radius: 14px 0px 0px 14px;
        }

        &:last-child {
            border-radius: 0px 14px 14px 0px;
            border-left: none;
        }

        &.active {
            background: #626BF1;
            color: #fff;
        }
    }

    .grid-content {
        margin-top: 20px;
        background: #F8F9FC;
        border: 1px solid #fff;
        border-radius: 12px;
        transition: .3s ease-in-out;

        .user-name {
            font-size: 16px;
            font-weight: 600;
        }

        .right {
            height: 96px;

            .title {
                width: 134px;
                height: 20px;
                background: #F3F4FB;
                border-radius: 9px;
                color: #939FF4;
                font-size: 14px;
            }

            .delete {
                width: 46px;
                height: 24px;
                background: #FFFFFF;
                border: 1px solid #FF5A77;
                border-radius: 12px;
                color: #FF5A77;
            }
        }

        &:hover {
            border: 1px solid #BEBDE6;
            box-shadow: 2px 6px 13px 0px rgba(225, 227, 245, 0.69);
        }
    }

    .bg-white {
        background-color: #F8F9FC;
    }

    .item {
        margin-top: 50px;
        width: 334px;
        height: 20px;
        background: #F9E0DE;
        border-radius: 10px;

        span {
            color: #E36572;

            i {
                margin-right: 10px;
                display: inline-block;
                width: 48px;
                height: 20px;
                line-height: 20px;
                background: #EE8892;
                border-radius: 3px;
                text-align: center;
                color: #fff;
                font-style: normal;
            }

        }
    }
</style>
